<template>
  <div class="content_box">
    <el-card>
      <!-- 搜索组件 -->
      <!-- <search-form
        :items="formItems"
        :params="params"
        :on-submit="onSearch"
        :btn-loading="loading"
      /> -->

      <!-- 左上角按钮 -->
      <div class="table-left-top">
        <el-button
          icon="el-icon-plus"
          size="mini"
          type="primary"
          @click="addPop"
          >新增优惠卷</el-button
        >
        <el-button
          icon="el-icon-plus"
          size="mini"
          type="primary"
          @click="sendPop"
          >发放管理</el-button
        >
      </div>

      <!-- 表格区域 -->
      <div class="table-body">
        <el-table
          ref="listData"
          style="margin-top: 10px"
          :data="listData"
          v-loading="loading"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="优惠券名称" />
          <el-table-column prop="couponType" label="优惠券类型">
            <template slot-scope="scope">
              {{scope.row.couponType==0?'指定金额券':scope.row.couponType==1?'区间折扣券':'满减券'}}
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="优惠券内容">
            <template slot-scope="scope">
              <p v-if="scope.row.couponType==0">优惠{{scope.row.amount}}元</p>
              <p v-if="scope.row.couponType==1">{{scope.row.content}}</p>
              <p v-if="scope.row.couponType==2">{{scope.row.content}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="优惠券备注" />
          <el-table-column prop="startTime" label="开始时间" />
          <el-table-column prop="endTime" label="结束时间" />
          <!-- <el-table-column prop="mobile" label="状态" /> -->
          <el-table-column prop="address" label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="editPop(scope.row)"
                >编辑</el-button
              >
              <el-button size="mini" type="text" @click="delBtn(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 编辑或删除页 -->
      <el-dialog
        v-if="dialog"
        :title="mdl.storeId ? '编辑优惠卷' : '新增优惠卷'"
        :visible.sync="dialog"
        width="700px"
      >
        <form-model
          :mdl="mdl"
          :parent-id="parentId"
          :handle-close-drawer="handleCloseDialog"
          @getList="getList"
        />
      </el-dialog>

      <!-- 发放管理 -->
      <el-dialog
        v-if="sendDialog"
        title="优惠券发放信息"
        :visible.sync="sendDialog"
        width="900px"
      >
        <form-send
          :mdl="mdl"
          :parent-id="parentId"
          :handle-close-drawer="handleCloseDialog"
        />
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import SearchForm from "@/components/SearchForm";
import FormModel from "./FormModel.vue";
import FormSend from "./FormSend.vue";
import { getCouponPage,delCoupon } from "@/api/user";
export default {
  name: "StoreList",
  components: { SearchForm, FormModel, FormSend },
  data() {
    return {
      params: {},
      loading: false,
      condition: {
        current: 1,
        size: 10,
      },
      listData: [],
      total: 0,
      mdl: {},
      parentId: 0,
      dialog: false, // 新增、编辑弹框
      sendDialog: false,
    };
  },
  computed: {
    formItems() {
      // 状态
      // const statusOptions = [
      //   { label: '丢安排', value: 0 },
      //   { label: '嗡嗡嗡', value: 1 }
      // ]

      // 构建搜索表单
      return [
        {
          title: "优惠卷名称",
          type: "input",
          key: "material_name",
          maxlength: 30,
        },
        // { title: '啊啊', type: 'select', key: 'status', options: statusOptions },
        // { title: '啊啊', type: 'date-range', key: 'created_at' }
      ];
    },
  },
  created() {
    this.getList();
  },
  methods: {
    // 删除店铺
    delBtn(row) {
      const that = this;
      that
        .$confirm("确定删除该优惠券？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          delCoupon({
            id: row.id,
          }).then((res) => {
            if (res.statusCode === "00000") {
              that.getList();
            }
          });
        })
        .catch(() => {});
    },
    // 获取列表
    getList() {
      this.loading = true;
      getCouponPage(this.condition).then((res) => {
        if (res.statusCode === "00000") {
          setTimeout(() => {
            this.loading = false;
            this.sendDialog = false;
            this.listData = res.data.records;
          }, 300);
        }
      });
    },

    // 搜索按钮
    onSearch() {
      console.log(this.params);
      this.getList();
    },

    // 新增-弹窗
    addPop() {
      this.dialog = true;
      this.mdl = {
        couponType: 0,
      };
    },

    // 发放管理-弹窗
    sendPop() {
      this.sendDialog = true;
      this.mdl = {
        giveOutCrowd: 0,
      };
    },

    // 修改-弹窗
    editPop(item) {
      console.log(item);
      this.mdl = Object.assign({}, item);
      this.dialog = true;
    },

    // 关闭dialog方法
    handleCloseDialog() {
      this.dialog = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.content_box {
  margin: 20px;
}
</style>
